<template>
  <bg class="login-all">
    <div :class="['login-content']">
      <div class="login-box">
        <div class="login-txt">
          <h1>
            <span class="unit">
              <img v-if="logo" :src="logo">
            </span>
            <span v-if="title" class="title" v-text="title" />
          </h1>
          <!-- <div class="slogan" v-html="slogan" /> -->
        </div>
        <el-form ref="form" class="login-dlg" :model="loginForm" :disabled="loading" :rules="rules">
          <el-form-item prop="username" class="item">
            <el-input v-model="loginForm.username" class="notCode" name="username" placeholder="请输入账号">
              <i slot="prefix" class="iconfont icon-zhanghao el-input__icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password" class="item">
            <el-input
              v-model="loginForm.password"
              class="notCode"
              type="password"
              name="password"
              autocomplete="new-password"
              placeholder="请输入密码"
            >
              <i slot="prefix" class="iconfont icon-mima el-input__icon" />
            </el-input>
          </el-form-item>
          <!-- <el-form-item prop="code" class="item">
            <el-input
              v-model="loginForm.code"
              class="isCode"
              name="code"
              autocomplete="code"
              placeholder="请输入验证码"
            />
            <img
              class="isCodeImg"
              :src="codeImg"
              alt=""
              @click="getCode"
            ></el-form-item> -->
          <el-form-item>
            <el-button :loading="loading" size="medium" type="primary" @click="handleLogin">{{
              loading ? '正在登录...' : '登录'
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </bg>
</template>
<script>
import { Form, FormItem, Input, Button } from 'element-ui'
import bg from '@/components/Bg'
import logo from '../../assets/img/333.png'
import defaultSettings from '@/settings'
const { title, unit, slogan } = defaultSettings
export default {
  components: {
    bg,
    elForm: Form,
    elFormItem: FormItem,
    elInput: Input,
    elButton: Button
    // elCheckbox: Checkbox
  },
  data() {
    return {
      unit,
      logo,
      title,
      slogan,
      loading: false,
      redirect: undefined,
      loginForm: {
        username: '',
        password: ''
        // code: ''
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      codeImg:
        '/api/ergo/common/admin/verification/code?width=120&height=50',
      timer: null
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted() {
    this.keyupEnter()
    console.log('页面刷新')
    // this.timer = setInterval(this.getCode, 20000)
  },
  beforeDestroy() {
    // clearInterval(this.timer)
  },
  methods: {
    keyupEnter() {
      document.onkeydown = e => {
        if (e.keyCode === 13 && e.target.baseURI.match(/login/)) {
          this.handleLogin()
        }
      }
    },
    handleLogin() {
      this.$refs.form.validate().then(r => {
        if (r) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then(async() => {
              await this.$store
                .dispatch('user/getInfo')
              if (this.redirect) {
                this.$router.push({ path: this.redirect })
              } else {
                this.$router.push({ path: '/' })
              }
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    }
  }
}
</script>
<style scoped>
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #fff;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #426ded;
  border-color: #426ded;
}
::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #426ded;
}
::v-deep .el-checkbox__inner:hover {
  border-color: #426ded;
}
::v-deep .el-checkbox__inner:focus {
  border-color: #426ded;
}
</style>
<style lang="scss" scoped>
.login-all {
  display: flex;
  align-items: center;
  user-select: none;
  height: 100vh;
  .el-form-item__error {
    line-height: 0.5;
    white-space: normal !important;
    margin: 0 !important;
  }
  .login-content {
    // background-color: rgba(0, 0, 0, 0.3);
    width: 100vw;
    .login-box {
      width: 1180px;
      margin: 0 auto;
      display: flex;
      color: #fff;
      flex-direction: column;
      align-items: center;
      .login-txt {
        flex-grow: 1000;
        box-sizing: border-box;
        display: flex;
        align-content: center;
        flex-direction: column;

        h1 {
          display: flex;
          align-items: center;
          flex-direction: column;

          .unit {
            display: flex;
            align-items: center;
            // line-height: 1.2;
            flex-shrink: 0;
            // flex-wrap: wrap;
            img {
              height: 62px;
              width: 287px;
              margin: 0 25px 0 0;
            }
          }
          .title {
            font-size: 33px;
            // font-weight: 400;
            margin-top: 52px;
            display: flex;
            align-items: flex-start;
            line-height: 1.2;
            white-space: pre;
          }
        }
      }

      .login-dlg {
        flex-shrink: 0;
        padding: 30px;
        width: 440px;
        // height: 390px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 1px 2px 0px 0px rgba(127, 127, 127, 0.18);
        &.el-form {
          .el-form-item {
            // margin: 0;

            &.item {
              // height: 6rem;
              .el-input__icon {
                font-size: 27px;
                line-height: 52px;
              }
            }
            ::v-deep .notCode {
              .el-input__inner {
                padding-left: 59px;
                height: 52px;
                background: rgba(255, 255, 255, 0.5);
                border: 1px solid rgba(255, 255, 255, 0.7);
                border-radius: 4px;
              }
              .el-input__prefix {
                padding: 0 10px 0 5px;
                color: #fff;
                &::after {
                  content: '';
                  position: absolute;
                  display: block;
                  width: 1px;
                  background-color: #fff;
                  border-radius: 50%;
                  right: 0;
                  top: 20%;
                  height: 60%;
                }
              }
            }
            ::v-deep .isCode {
              width: 250px;
              .el-input__inner {
                float: left;
                width: 250px;
                height: 52px;
                background: rgba(255, 255, 255, 0.5);
                border: 1px solid rgba(255, 255, 255, 0.7);
                border-radius: 4px;
              }
              .el-input__prefix {
                padding: 0 10px 0 10px;
                color: #fff;
                &::after {
                  content: '';
                  position: absolute;
                  display: block;
                  width: 1px;
                  background-color: #fff;
                  border-radius: 50%;
                  right: 0;
                  top: 20%;
                  height: 60%;
                }
              }
            }
            .isCodeImg {
              width: 120px;
              height: 51px;
              float: right;
              cursor: pointer;
            }

            .el-checkbox {
              &.is-checked {
                .el-checkbox__input {
                  &.is-checked {
                    .el-checkbox__inner {
                      background-color: #426ded;
                      border-color: #426ded;
                    }
                  }
                }
              }
            }

            .el-checkbox__label {
              color: #fff;
            }

            .el-button {
              margin-top: 62px;
              font-size: 18px;
              font-weight: 400;
              height: 52px;
              line-height: 52px;
              padding: 0;
              width: 100%;
              &.el-button--primary {
                background-color: #1890ff;
                border-color: #1890ff;
                &:hover,
                &:focus {
                  background-color: #1890ff;
                  border-color: #1890ff;
                }
              }
            }
            .el-form-item__content {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
.slogan {
  font-size: 36px;
  font-weight: 400;
  line-height: 2;
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}

::v-deep input::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #fff;
  font-size: 16px;
}
::v-deep :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #fff;
  font-size: 16px;
}
::v-deep ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #fff;
}
::v-deep input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #fff;
  font-size: 16px;
}
::v-deep input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #fff;
  font-size: 16px;
}
</style>
